<template>


  <div>
    <i class="el-icon-back" @click="$router.push('/manage/user')"></i>

    <el-form label-width="80px" style="" :model="form"   ref="rulerForm">

      <el-form-item label="昵称" prop="name">
        <el-input v-model="form.name" auto-complete="off" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" auto-complete="off" placeholder="请输入年龄"></el-input>
      </el-form-item>
      <el-form-item label="电话号" prop="phone">
        <el-input v-model="form.phone" auto-complete="off" placeholder="请输入电话号"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="name">
        <el-input v-model="form.address" auto-complete="off" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-button @click="save" type="success" style="margin-left: 100px">修改</el-button>
      <el-button @click="handleEdit()" type="warning" style="margin-left: 50px">修改密码</el-button>


    </el-form>


    <el-dialog title="用户信息" :visible.sync="updateTab" width="100%" top="10%">
      <el-form label-width="80px" style="" :model="updateForm"  :rules="rules" ref="rulerForm">

        <el-form-item label="账号" prop="username">
          <el-input v-model="updateForm.username" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="newPass">
          <el-input v-model="updateForm.newPass" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="再次输入" prop="confirmPassword">
          <el-input v-model="updateForm.confirmPassword" auto-complete="off" placeholder="请再次输入密码"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="register()">确 认</el-button>
        <el-button @click="handleCancelUpdate">关 闭</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
import Cookies from "js-cookie";
import request from "@/utils/request";

export default {
  name: "Information",

  data() {
    return{
      user: Cookies.get('user') ? JSON.parse(Cookies.get('user')) : {},
      updateData:[],
      form: {},
      updateForm:{},
      updateTab: false,
    }
  },
  created() {
    request.get('/user/' + this.user.id).then(res => {
      this.form = res.data;
      this.updateForm = res.data;
    })
  },

  methods:{
    register() {
      this.$refs['rulerForm'].validate((valid) => {
        if (valid) {
          if (this.updateForm.newPass !== this.updateForm.confirmPassword) {
            this.$message.error('两次输入的密码不一致');
            return false;
          }
          request.put('/user/password', this.updateForm).then(res => {
            if (res.code === '200') {
              this.$notify.success("密码修改成功！")
              this.$router.push('/login')
            } else {
              this.$notify.error(res.msg)
            }
          })
        }
      })
    },
    handleEdit() {
      this.updateTab = true;
    },
    handleCancelUpdate() {
      this.updateTab = false
      this.load()
    },
    save() {
      this.$refs['rulerForm'].validate((valid) => {
        if (valid) {
          request.post('/user/save', this.form).then(res => {
            if (res.code === '200') {
              this.$message.success('保存成功')
              this.dialogFormVisible = false
              this.load()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },

    }


}
</script>

<style scoped>

</style>